<template>
  <div class="fee-deduction-record">
    <div class="aside">
      <div class="search-wrap">
        <Search />
        <span>搜索</span>
      </div>
      <div class="tree-wrap">
        <el-tree
          :data="data"
          show-checkbox
          :props="defaultProps"
          node-key="id"
          :check-strictly="true"
        />
      </div>
    </div>
    <div class="main-content">
      <div class="content-wrap">
        <div class="search-wrap">
          <el-form :inline="true" :model="params">
            <el-row>
              <el-col :span="7" class="col-one">
                <el-form-item label="起始日期">
                  <el-date-picker
                    v-model="params.value1"
                    type="date"
                    placeholder="请选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7" class="col-one">
                <el-form-item label="结束日期">
                  <el-date-picker
                    v-model="params.value1"
                    type="date"
                    placeholder="请选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="7">
                <div class="btn-wrap">
                  <el-button :icon="Search" type="primary" @click="getList"
                    >查询</el-button
                  >
                  <button class="export-btn">
                    <Svg
                      name="daochu"
                      width="16"
                      height="16"
                      color="#fff"
                    ></Svg>
                    &nbsp;导出
                  </button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <ul class="device-data">
          <li>
            <div>
              <span>仪表数量</span>
              <span class="val">310</span>
            </div>
            <div><span>扣费金额</span> <span class="val">1000</span></div>
            <div><span>缴费金额</span> <span class="val">30</span></div>
            <div><span>退费金额</span> <span class="val">20</span></div>
          </li>
        </ul>
        <div class="table-data">
          <el-table class="table-height" :data="tableData">
            <!-- <el-table-column type="selection" align="center"> </el-table-column> -->
            <el-table-column
              v-for="item in tableItem"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
              <template #default="{ row }" v-if="item.label === '空调状态'">
                <div class="air-status">
                  <!-- 
                    #06FF34 运行中
                    #FFC922 报警
                    #FF2222 故障
                    #FFFFFF  离线
                  -->
                  <div class="circle"></div>
                  <span>运行中</span>
                </div>
              </template>
              <template #default="{ row }" v-if="item.label == '开关'">
                <div class="switch">
                  <el-switch v-model="params.value2" />
                </div>
              </template>
              <template #default="{ row }" v-if="item.label === '操作'">
                <div class="btn-wrap">
                  <button class="distribute" @click="handleNodeClick(row)">
                    派发
                  </button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            v-model:currentPage="params.currentPage"
            :total="total"
            v-model:page-size="params.pageSize"
          />
        </div>
      </div>
    </div>
    <Dialog
      v-model:showDialog="showDiaLog"
      headerName="派发详情"
      :diaWidth="48"
      footerPadding="0 160"
    >
      <template #content>
        <div class="dia-content">
          <el-form :model="diaForm" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备名称">
                  <el-input clearbaler v-model="diaForm.fs"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型">
                  <el-select clearbaler v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select></el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属位置">
                  <el-input clearbaler v-model="diaForm.fs"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报警等级">
                  <el-select clearbaler v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select></el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属变压器">
                  <el-select clearbaler v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select
                ></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="事件类型">
                  <el-select clearbaler v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select></el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属出线柜">
                  <el-input clearbaler v-model="diaForm.fs"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报警时间">
                  <el-date-picker
                    clearbaler
                    v-model="diaForm.value1"
                    type="date"
                    placeholder="请选择日期"
                  /> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="仪表名称">
                  <el-input clearbaler v-model="diaForm.fs"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="报警描述">
                  <el-input
                    class="warning-detail"
                    clearbaler
                    :rows="3"
                    v-model="diaForm.sd"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="接单人">
                  <el-select
                    clearbaler
                    v-model="value"
                    placeholder="请选择"
                    class="update-bgc"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select
                ></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整改时间">
                  <el-select
                    clearbaler
                    v-model="value"
                    placeholder="请选择"
                    class="update-bgc"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select></el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="工单任务">
                  <el-input
                    clearbaler
                    :rows="3"
                    v-model="diaForm.sd"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let showDiaLog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({});
let options = [{ label: 1, value: 1 }];
const defaultProps = {
  children: "children",
  label: "label",
};
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "表号",
  },
  {
    prop: "date",
    label: "区域",
  },
  {
    prop: "date",
    label: "房间",
  },
  {
    prop: "date",
    label: "户名",
  },

  {
    prop: "date",
    label: "联系电话",
  },
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "date",
    label: "扣费金额",
  },
]);

const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let getList = () => {};
let handleNodeClick = (e) => {
  showDiaLog.value = true;
};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.fee-deduction-record {
  width: 100%;
  margin-top: 5px;
  display: flex;
  .aside {
    width: 204px;
    background-color: #022552;
    height: calc(100vh - 168px - 9px);
    padding-top: 22px;
    flex-shrink: 0;
    margin-right: 9px;
    .tree-wrap {
      padding-top: 28px;
      display: flex;
      padding-left: 25px;
      justify-content: center;
      :deep(.el-tree) {
        width: 100%;
        background-color: #022552;
        height: calc(100vh - 168px - 9px - 28px);
      }
      :deep(.el-checkbox__inner) {
        width: 15px;
        height: 15px;
        background: #044483;
        border: 1px solid #61c8ff;
      }
      :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
        width: 4px;
        height: 10px;
      }
    }
    .search-wrap {
      margin: 0 auto;
      width: 171px;
      height: 39px;
      background: rgba(97, 200, 255, 0.31);
      border-radius: 20px;
      border: 1px solid #61c8ff;
      display: flex;
      align-items: center;
      padding-left: 16px;
      cursor: pointer;
      svg {
        color: #fff;
        width: 12px;
        height: 13px;
        margin-right: 7px;
      }
      span {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
  .main-content {
    display: flex;

    flex-direction: column;

    flex-shrink: 0;
    .content-wrap {
      height: calc(100vh - 168px - 9px);
      background-color: #022552;
      width: 100%;
      padding-top: 19px;
      padding-left: 15px;
      padding-right: 21px;
      .device-data {
        display: flex;

        width: 1373px;
        margin-top: 25px;
        height: 79px;
        background: #0f3c6c;
        border: 1px solid #61c8ff;

        li {
          flex-grow: 1;

          display: flex;

          align-items: center;

          background-color: #0f3c6c;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
          div {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            flex-grow: 1;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 38px;
          }

          .val {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            border-top: 1px solid #225c8d;
            display: block;
            width: 100%;
          }
        }
      }
      .table-data {
        margin-top: 12px;
        width: 1373px;
        .btn-wrap {
          display: flex;
          justify-content: center;
        }

        .distribute {
          width: 73px;
          height: 31px;
          background: rgba(97, 200, 255, 0.28);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          cursor: pointer;
        }
        .table-height {
          height: 525px;
          width: 1590px;
          .switch {
          }
          .air-status {
            display: flex;
            align-items: center;
            justify-content: center;
            .circle {
              width: 17px;
              height: 17px;
              border-radius: 50%;
              border: 3px solid #ffc922;
              margin-right: 7px;
            }
            span {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 16px;
              color: #fefefe;
            }
          }
        }

        :deep(.el-table__row) {
          height: 47.2px !important;
          background-color: #022552 !important;

          .cell {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #fefefe;
          }
        }
      }
      .pagination {
        padding-right: 10px;
        padding-top: 22px;
      }

      .search-wrap {
        /* padding-left: 32px; */
        padding-top: 8px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
        }
        .device-witdh {
          width: 320px;
        }
        .sel-width {
          width: 220px;
        }
        .del-btn {
          display: flex;
          align-items: center;
          width: 81px;
          height: 35px;
          background: rgba(133, 18, 20, 0.4);
          border: 1px solid #ff2222;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          padding-left: 11px;
          margin-left: 17px;
          img {
            width: 15px;
            height: 17px;
            margin-right: 7px;
          }
        }
        .btn-wrap {
          display: flex;
          align-items: center;

          .export-btn {
            width: 81px !important;
            height: 35px;
            background: rgba(31, 144, 12, 0.4);
            border: 1px solid #06ff34;
            margin-left: 20px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            padding-left: 10px;
            cursor: pointer;
          }
        }

        :deep(.el-col.el-col-1.is-guttered) {
          padding-left: 0px !important;
        }
        :deep(.el-date-editor) {
          width: 300px !important;
        }

        :deep(.el-form-item) {
          margin-bottom: 0px;
        }
        :deep(.el-button) {
          width: 84px;
          height: 35px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 16px !important;
            height: 150px !important;
          }
        }
      }
    }
  }
  .dia-content {
    padding-left: 30px;
    padding-right: 20px;
    padding-top: 20px;
    :deep(.el-row) {
      margin-top: 10px;
    }
    .warning-detail :deep(.el-textarea__inner) {
      background-color: #235b87;
    }
    .update-bgc :deep(.el-input__wrapper) {
      background-color: transparent;
    }
  }
}
</style>
